<template>
  <a-row :gutter="16">
    <a-col :xl="6" :md="8">
      <a-card title="站点" :bodered="false">
        <a-tooltip placement="top" :visible="searchTooltipVisible">
          <template #title>
            <span>请输入名称后搜索</span>
          </template>
          <a-input-search v-model="query" placeholder="输入名称搜索" @search="onSearch"/>
        </a-tooltip>

        <div class="tree-wrapper">
          <a-alert v-if="noResults" :style="{marginTop: '5px', marginBottom: '5px'}" message="未搜索到数据" banner/>
          <tree
            :load-data="onLoadData"
            :tree-data="treeData"
            :expanded-keys="expandedKeys"
            :selected-keys="selectedKeys"
            :draggable="$permissions(CMS_SITE_CONST.CMS_SITE_MOVE)"
            show-line
            @select="onSelect"
            @expand="onExpand"
          >
          </tree>
          <a-button size="small" v-if="search" @click="firstLoadData">
            返回
          </a-button>
        </div>
      </a-card>
    </a-col>
    <a-col :xl="18" :md="16">
      <a-card title="用户" :bodered="false">

      </a-card>
    </a-col>
  </a-row>
</template>

<script>

import { Tree } from 'ant-design-vue'
import { convertTree, isNotBlank } from '@/utils/util'
import { convertTreeData } from '@/utils/ant-design/data-display/tree'
import { CMS_SITE_CONST } from '@/utils/const/cms/CmsSiteConst'
import { selectByPId, selectByTitle } from '@/api/cms/site'

const baseId = '0'

export default {
  name: 'CmsSiteUserView',
  components: { Tree },
  data () {
    return {
      CMS_SITE_CONST: CMS_SITE_CONST,

      query: '',
      search: false,
      noResults: false,
      searchTooltipVisible: false,

      // 树相关
      treeData: [],
      expandedKeys: [],
      selectedKeys: []
    }
  },
  mounted () {
    this.firstLoadData()
  },
  methods: {
    firstLoadData () {
      this.query = ''
      this.search = false
      this.noResults = false
      this.searchTooltipVisible = false
      selectByPId().then(res => {
        this.treeData = convertTreeData(convertTree(res.data))
        if (this.treeData[0].id === baseId) {
          this.treeData[0].selectable = false
        }
        // 默认展开根节点
        this.expandedKeys.push(baseId)
      })
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
    },
    onSearch () {
      if (isNotBlank(this.query)) {
        this.searchTooltipVisible = false
        this.search = true
        selectByTitle(this.query).then(res => {
          this.noResults = res.data.length === 0
          this.treeData = convertTreeData(res.data)
        })
      } else {
        this.searchTooltipVisible = true
      }
    },
    /**
     * 节点点击回调
     *
     * @param selectedKeys
     * @param e
     */
    onSelect (selectedKeys, e) {
      this.selectedKeys = selectedKeys
      if (e.node.dataRef.id !== baseId) {
        this.edit(e.node.dataRef.id)
      }
    },
    /**
     * 异步加载节点数据
     *
     * @param treeNode
     * @return {Promise<unknown>}
     */
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve()
          return
        }

        this.loadData(treeNode.dataRef, () => {
          resolve()
        })
      })
    }
  }
}
</script>
